import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { AuthTokenService } from '@services/auth-token.service';
import { TranslateService } from '@ngx-translate/core';
import { DefaultLanguageService } from '@services/default-language.service';
import { EventEmitterService,EventName } from '@services/event-emitter.service';
import { CommonService, ToastColor } from '@services/common-service.service';
import { CustomToastProviderService,CustomToastOption } from '@common-components/common-toast/custom-toast-provider.service';

@Component({
  selector: 'app-setting',
  templateUrl: './setting.page.html',
  styleUrls: ['./setting.page.scss'],
})

export class SettingPage implements OnInit {

  public i18n:any;

  public techs:Array<any>;

  constructor(
    private router: Router,
    private authTokenService:AuthTokenService,
    private translate: TranslateService,
    private defaultLanguageService:DefaultLanguageService,
    private eventEmitterService:EventEmitterService,
    private commonService:CommonService,
    private customToastProviderService:CustomToastProviderService) {
      this.initLanguage();
      this.initEventMonitor();
  }

  ngOnInit() {
    
  }

  initLanguage(){
    let defaultLanguage = this.defaultLanguageService.getDefaultLanguage();
    this.translate.setDefaultLang(defaultLanguage);
    this.translate.use(defaultLanguage);
    this.translate.get('myAccount.setting').subscribe((obj)=>{
      this.i18n = obj;
      this.initTables();
    }); 
  }

  initEventMonitor(){
    this.eventEmitterService.eventEmit.subscribe((value: any) => {
      //from src\app\pages\myaccount\setting\language\language.page.ts
      if(value == EventName.EMAIL_CHANGED) {
        this.initLanguage();
      }
    });
  }

  initTables(){
    this.techs = [
      {
        'id':1,
        'title': this.i18n.personal_information,
        'icon': 'angular',
        'path':'/tabs/myAccount/setting/personal-info'
      },
      {
        'id':2,
        'title': this.i18n.account_scurity,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/account-security'
      },
      {
        'id':3,
        'title': this.i18n.payment_setting,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/payment-settings'
      },
      {
        'id':4,
        'title': this.i18n.message_notification,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/message-notification'
      },
      {
        'id':5,
        'title': this.i18n.language_setting,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/language'
      },
      {
        'id':6,
        'title': this.i18n.support_center,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/support-center'
      },
      {
        'id':7,
        'title': this.i18n.about,
        'icon': 'css3',
        'path':'/tabs/myAccount/setting/about'
      }
    ]
  }

  showDetail(techId){
    const tech = this.techs.find(tech => tech.id === techId);
    this.router.navigate([tech.path]);
  }

  signOut(){
    this.authTokenService.logout();
    this.router.navigate(['/auth/signin-password']);
  }

}
